@import "font.css";
@import "fancybox.css";
@import "main.css";
@import "jquery.bxslider.css";

/* ######## :: SETUP :: ######## */
body { margin:0px; padding:0; color:#6c6c6d; font-family:  arial,tahoma,verdana,sans-serif; font-size:12px; line-height:1.35em; }
div, ul, ol, li {margin: 0px; padding: 0px; list-style: none;}
::-webkit-input-placeholder { color:#6c6c6d;}
:-moz-placeholder { /* Firefox 18- */ color:#6c6c6d;  }
::-moz-placeholder {  /* Firefox 19+ */ color:#6c6c6d;  }
:-ms-input-placeholder {color:#6c6c6d }
::-moz-selection { background: #3cc0b7; color: #fff; text-shadow: none;}
::selection {}
a:link , a:visited{ text-decoration: none;  color:#888}
a:hover { text-decoration:none; color:#888;}
.clearAll { display: block; clear: both; height: 0px;}
input,textarea,select  { font-family: arial,tahoma,verdana,sans-serif,'lucida grande'; font-size:14px; border:0;}
input:focus { box-shadow: 0 0 5px rgba(0, 0, 255, 1); -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, 1); -moz-box-shadow: 0 0 5px rgba(0, 0, 255, 1); }
h1,h2,h3,h4 { font-weight:normal; line-height:normal; padding:0; margin:0}
p { font-weight:normal; line-height:1.4em; padding:0; margin:0}
.left { float:left;}
.right { float:right;}
img { border-style: none;}

.wrapper { }
#wrap{
	position:absolute;
	z-index:-1; 
	top:0; 
	left:0; 
	background-color:#FFF;
}
#wrap img.bgfade{
	position:absolute;
	top:0;
	display:none;
	width:100%;
	height:100%;
	z-index:-1
}
.bgbody-home {background:url(../images/bg-body-home.jpg) top center no-repeat;}
.bgbody {background:url(../images/bg-body.jpg) top center no-repeat;}
.bgbody01 { background:url(../images/bg-body-01.jpg) top center no-repeat;}

.pageContent { width:1000px; margin:0 auto; overflow:hidden;}

/* Header */
#header { height:222px; position:relative;}
#header .logo { float:left; margin-top:22px; margin-left:25px;}
#header .col-right { float:right; padding-right:25px;}
.col-right form { margin-top:20px; margin-bottom:12px;}

/* Search Top */
.searchTop { width:330px; height:23px; position:relative;}
.searchTop input { width:227px; height:23px; padding:0 10px; font-size:11px; color:#aeafb0; background:url(../images/bg-search.png) no-repeat;}
.searchTop span { position:absolute; display:inline-block}

/* navCrumb */
.navCrumb { overflow:hidden; clear:both; position:relative; margin-bottom:20px;}
.navCrumb li { float:left; font-size:11px; line-height:2.6em; background:url(../images/line-navcrumb.png) right center no-repeat; padding:0 8px 0 5px;}
.navCrumb li.home { background:none; padding:0}
.navCrumb li a { color:#6c6c6d; }
.navCrumb li.active { color:#0a82c7; font-weight:bold;}
.navCrumb li.last { background:none}

/* navMain */
#navMain { position:absolute; top:87px; left:50%; margin-left:-360px;}
#navMain li { float:left; font-size:16px; text-transform:uppercase; padding:8px 18px;}
#navMain li a { font-size:16px;}
#navMain li.about:hover {background:#ed1b24; color:#FFF}
#navMain li.about:hover a { color:#FFF}
#subMenu { display:none; width:500px; background:#ed1b24; position:absolute; overflow:hidden; padding:8px; margin-left:-18px;}
#subMenu img { border:1px solid #f7969b; float:left; margin-right:10px;}
#subMenu .navSub { padding:10px 0;}
#subMenu .navSub li { width:175px; padding:0; margin-bottom:2px;}
#subMenu .navSub li a {color:#FFF;  font-family: Helvetica , verdana, arial, sans-serif; font-size:13px; text-transform:capitalize; background:url(../images/bullet-submenu.jpg) left no-repeat; padding-left:10px;}

/* Main */
#main { overflow:hidden;}
#main .sidebar  { width:212px; min-height:500px; float:left; padding-top:5px; background:url(../images/bg-sidebar.jpg) center top no-repeat;}
#main .sidebar li { background:url(../images/bullet-sidebar.png) 2px center no-repeat; padding-left:18px; margin-bottom:5px;}
#main .sidebar li a { color:#517cac; font-size:18px;}
#main .sidebar li.active { color:#0a82c7; font-size:18px;}
#main .sidebar .btn-dw { margin-top:20px;}
#main .mainContent { width:772px; margin: 0 auto;}
#main .mainContent p { line-height:1.5; margin-bottom:15px;}
#main h1 { color:#36689f; font-size:35px; margin-bottom:5px; text-transform: uppercase}

/* Table */
table.style-tb-company { margin:15px 0;}
table.style-tb-company th { background:#1798ce; color:#FFF; padding:8px 12px; text-transform:uppercase; text-align:left}
table.style-tb-company td {  padding:8px 12px; border-bottom:1px solid #FFF;background:#ecf2f4; }

table.style-tb {}
table.style-tb thead th { background:#5d5d5b; color:#FFF; font-size:18px; padding:14px 12px; border-bottom:1px solid #FFF;}
table.style-tb tbody th { background:#1798ce; color:#FFF; padding:8px 12px; text-transform:uppercase; border-right:1px solid #FFF}
table.style-tb tr:nth-child(even) { background:#f5f8f9}
table.style-tb tr:nth-child(odd) { background:#fafbfc}
table.style-tb td { padding:8px 12px; border-bottom:1px solid #FFF; vertical-align:text-top}
table.style-tb .h { color:#92a8bc; font-size:12px; font-weight:bold;}
table.style-tb tfoot td { background:#e4eef2; color:#1798ce; font-weight:bold;}
table.style-tb img { vertical-align:middle}

/* List num */
ol.list-num { margin-left:18px;}
ol.list-num li { overflow:visible;
	list-style-type: decimal;
}

/* PageList */
.innerPageList { border-top:1px solid #d0d6d7; padding-top:25px; overflow:hidden;}
.pageList { margin:0 auto;}
.pageList li { float:left; width:21px; height:21px; margin-right:5px; display:inline-block; background:#eaeaea;}
.pageList li a { display:block;height:21px; }
.pageList li.active { background:#2c8abc}
.pageList li.back { width:54px; height:22px; background-color:#FFF; text-indent:9999}
.pageList li.next { width:54px; height:22px; background-color:#FFF; text-indent:9999}

/* Btn */
a.btn, input[type=submit] { font-size:13px; font-weight:bold; display:inline-block; background:#3290ba; color:#FFF; text-align:center; padding:10px 20px;} 
a.btn:hover, input[type=submit] { background:#1798ce}

/* Form */
.form-style select {
	display: inline-block; color:#6c6c6d;
	border:1px solid #c6cacc; padding:7px 10px 7px 10px; font-size:12px;
	border-radius:0;
	outline: none;
	/*-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;*/
	cursor: pointer;
	/*background:#f7f8f8 url(../images/arrw-list.png) 95% center no-repeat;*/
}

/* Footer */
#footer { background:url(../images/bg-footer.jpg) top center no-repeat; height:97px; margin-top:30px;}
.copyright { font-size:11px; color:#7a9096; padding-top:65px; padding-left:40px;}



.bn { margin-bottom:22px;}

#about h3 { font-size:15px; color:#0a82c7; font-weight:bold; padding-bottom:10px; margin-top:6px;}
#about .col-left { width:375px; float:left;}
#about .col-right { width:375px; float:right;}
#about .rowContent { overflow:hidden;}

.company-background {}
.company-background .col-left { width:362px; padding-right:8px; float:left; border-right:1px solid #d0d6d7}
.company-background .col-right { width:362px  !important; float:right}

/* corporate-governance */
.corporate-governance { margin-top:20px; border-bottom:1px solid #d0d6d7; padding-bottom:10px; margin-bottom:12px;}
.obj-corporate-governance { width:769px; height:174px; background:url(../images/pic-corporate-governance-01.jpg) no-repeat; margin-bottom:20px;}
.obj-corporate-governance .content { width:300px; color:#FFF; margin-left:190px; padding-top:10px;}
.obj-corporate-governance .content p { line-height:1}
.obj-corporate-governance .content h2 { color:#FFF; font-weight:bold; font-size:18px; margin-bottom:5px;}

/* Management */
#management {}
#management .rowContent { overflow:hidden; border-bottom:1px solid #d0d6d7; margin-bottom:15px; padding-left:40px;}
#management .rowContent.last { border:0}
#management h2 { font-size:20px; color:#0a82c7; font-size:20px; margin-top:6px;}
#management h2.org {color:#e7920d}
#management .managementList { margin-top:30px;}
#management .managementList li { width:199px; height:270px; float:left; text-align:center; margin-right:38px; margin-bottom:20px;}
#management .managementList .img { margin-bottom:12px;}
#management .managementList h3 { font-size:16px !important; color:#308bb3; padding-bottom:3px !important;}
#management .managementList h3.org { color:#e7920d}


/* CSR */
#csr-activity {}
.yearsList { margin:15px 0 25px 0; overflow:hidden;}
.yearsList li { float:left; margin-right:15px; font-size:15px; font-weight:bold; padding:3px 6px; border:1px solid #FFF}
.yearsList li a { color:#939393;}
.yearsList li.active { color:#0a82c7; border:1px solid #0a82c7}
.yearsList li:hover { color:#0a82c7; border:1px solid #0a82c7}
.yearsList li:hover a { color:#0a82c7;}

.csrList li { width:180px; height:220px; float:left; margin:0 15px 0 0;}
.csrList li.last { margin-right:0}
.csrList .tn { margin-bottom:12px;}
.csrList .date { font-size:13px; font-weight:bold; margin-bottom:3px;}
.csrList p { font-size:11px} 

/* CSR Activity Detail */
#photo-csr { width:470px; float:left;}
#photo-csr .thum { margin-top:12px;}
#photo-csr .thum li { float:left; margin-right:12px;}
.detailCsr .detail { width:280px; float:right; color:#6c6c6d;}
.detailCsr p.date { margin-bottom:3px !important}
.detailCsr .date { color:#6c6c6d; font-size:12px; font-weight:bold; margin-bottom:3px;}
.detailCsr .date .btn { margin-top:20px;}

/* strategies */
#strategies {}
#strategies h3 { font-size:15px; color:#0a82c7; font-weight:bold; padding-bottom:10px; margin-top:6px;}
#strategies .rowContent { overflow:hidden;}
#strategies .col-left { width:372px; padding-right:8px; float:left; border-right:1px solid #d0d6d7} 
#strategies .col-right { width:372px; float:right}
#strategies .box-img { margin:30px 0 30px 0; width:772px; height:305px; background:url(../images/pic-strategies.jpg) no-repeat;}
#strategies .box-img h3 { font-size:18px; color:#FFF; margin-bottom:0px !important; margin-top:0 !important;}
#strategies .box-img .content { width:390px; padding:12px 25px; color:#FFF;}
#strategies .box-img .content p { line-height:1.2}
#strategies ul.info li { width:155px; height:50px; float:left; margin-right:40px; margin-bottom:6px;}
#strategies ul.info li.last { margin-right:0}

/* Brochure */
#brochure .col-left { width:410px; padding-right:8px; float:left; border-right:1px solid #d0d6d7}
#brochure .col-right { width:320px; float:right;}
#brochure .youtube { margin:10px 0;}
#brochure .brochureList { margin-bottom:10px; overflow:hidden;}
#brochure .brochureList li { width:175px; margin-right:18px; float:left}
#brochure .brochureList li.last { margin-right:0}
#brochure .brochureList p { margin-bottom:6px;}


.hl-contact { margin-bottom:22px;}

#contact .col-left { width:435px; float:left; padding-right:55px; border-right:1px solid #d0d6d7; }
#contact .inlinebox { border-bottom:1px solid #d0d6d7; padding-bottom:25px; margin-bottom:15px;}
#contact .inlinebox.last { border-bottom:0}
#contact .col-right { width:435px; float:right; margin-right:15px}
#contact h3 { color:#0a82c7; font-size:15px; margin-bottom:15px;}
#contact .boxAdress p { line-height:1.6}
#contact .boxAdress .h { width:80px; display:inline-block;}
#contact .boxAdress a { color:#1798ce}

.formContact {}
.formContact li { margin-bottom:8px;}
.formContact input { width:410px; padding:8px 10px; background:#f7f8f8; border:1px solid #c6cacc; color:#6c6c6d; font-size:12px;}
.formContact .box { width:186px; float:left; margin-right:15px; margin-bottom:10px;}
.formContact .box.last { margin-right:0}
.formContact textarea {  width:410px; padding:8px 10px; background:#f7f8f8; border:1px solid #c6cacc; color:#6c6c6d; font-size:12px;}

.btn-contact a { margin-right:8px;}

/* Map */
#map { margin-top:25px; overflow:hidden;}
#map h3 {  font-family: 'db_ozone_xmedium'; text-transform:uppercase; font-size:22px; height:53px; background:#586e78; color:#FFF; padding:0 12px; line-height:2.5; margin-bottom:0}
#map .ico { float:left;}
#map .mapList { width:205px; float:left; position:relative; margin-right:1px;}
#map .mapList.last { margin-right:0}
#map .boxMap { width:483px; float:left; display:inline-block;}
#map .ico-zoom { position:absolute; bottom:0; right:0;}



.bn { margin-bottom:22px;}
#ir .col-left { width:300px; float:left; }
#ir .inlinebox { margin-bottom:15px;}
#ir .col-right { width:435px; float:right;}
#ir h3 { color:#0a82c7; font-size:15px; margin-bottom:15px;}
#ir .boxAdress p { line-height:1.6}
#ir .boxAdress .h { width:80px; display:inline-block;}
#ir .boxAdress a { color:#1798ce}

.formContact {}
.formContact li { margin-bottom:8px;}
.formContact input { width:410px; padding:8px 10px; background:#f7f8f8; border:1px solid #c6cacc; color:#6c6c6d; font-size:12px;}
.formContact .box { width:186px; float:left; margin-right:15px; margin-bottom:10px;}
.formContact .box.last { margin-right:0}
.formContact textarea {  width:410px; padding:8px 10px; background:#f7f8f8; border:1px solid #c6cacc; color:#6c6c6d; font-size:12px;}

.btn-contact a { margin-right:8px;}

/* Company */
#company {}
#company .rowContent { padding:10px 0; margin-bottom:10px; overflow:hidden;}
#company h3 { color:#0a82c7; font-size:15px; margin-bottom:15px; border-bottom:1px solid #d0d6d7; padding-bottom:10px;}
#company .infoList { margin-bottom:20px;}
#company .infoList li { margin-bottom:2px;}
#company .infoList .h { width:145px; float:left; display:inline-block; color:#92a8bc; font-size:12px; font-weight:bold; padding-left:5px;}

/* Annual Report  */
#annual-report h3 { color:#0a82c7; font-size:15px; border-bottom:1px solid #d0d6d7; padding-bottom:10px;}
#annual-report .rowContent { margin-bottom:15px; padding:10px 0; overflow:hidden;}
#annual-report .annualList li { overflow:hidden; border-bottom:1px solid #d0d6d7; padding:8px 0; vertical-align:middle}
#annual-report .annualList img { vertical-align:middle}
#annual-report .annualList span { display:inline-block;}
#annual-report .annualList .h { line-height:2em;}
#annual-report .annualList .btn-dw { float:right;}

#corporate-governance {}
#corporate-governance .col-left { width:372px; float:left;}
#corporate-governance .col-right {  width:372px; float:right;}
#corporate-governance h3 { color:#0a82c7; font-size:15px; margin-bottom:15px; border-bottom:1px solid #d0d6d7; padding-bottom:10px;}
#corporate-governance .rowContent { overflow:hidden; clear:both; margin-bottom:10px;}

/* corporate-governance-score */
#corporate-governance-score {}
#corporate-governance-score .col-left { width:372px; float:left;}
#corporate-governance-score .col-right {  width:372px; float:right;}
#corporate-governance-score h3 { color:#0a82c7; font-size:15px; margin-bottom:15px; font-weight:bold; font-family:Tahoma, Geneva, sans-serif; border-bottom:1px solid #d0d6d7; padding-bottom:10px;}
#corporate-governance-score .rowContent { overflow:hidden; clear:both; margin-bottom:20px;}

table.tb-style-governance {  font-family:Tahoma, Geneva, sans-serif; width:333px; margin-bottom:20px; margin-right:15px;}
table.tb-style-governance thead th { background:#1798ce; color:#FFF; padding:8px 12px; border-bottom:1px solid #FFF; border-right:1px solid #FFF}
table.tb-style-governance thead th:last-child { border-right:0}
table.tb-style-governance thead td:last-child { border-right:0}
table.tb-style-governance thead td { background:#5fb1d4; color:#FFF; padding:6px 12px; font-weight:bold; border-bottom:1px solid #FFF;border-right:1px solid #FFF}
table.tb-style-governance tbody th { background:#e0e7e7; color:#1798ce;  padding:8px 12px; border-bottom:1px solid #FFF;}
table.tb-style-governance tbody td { background:#f5f8f9;  padding:8px 12px; border-bottom:1px solid #FFF;}
table.tb-style-governance .h { color:#1798ce; font-size:12px; font-weight:bold;}

table.tb-style-governance-org {  font-family:Tahoma, Geneva, sans-serif; width:333px; margin-bottom:20px; margin-right:15px;}
table.tb-style-governance-org thead th { background:#f1a43f; color:#FFF; padding:8px 12px; border-bottom:1px solid #FFF; border-right:1px solid #FFF}
table.tb-style-governance-org thead th:last-child { border-right:0}
table.tb-style-governance-org thead td:last-child { border-right:0}
table.tb-style-governance-org thead td { background:#f1c35f; color:#FFF; padding:6px 12px; font-weight:bold; border-bottom:1px solid #FFF;border-right:1px solid #FFF}
table.tb-style-governance-org tbody th { font-family:Tahoma, Geneva, sans-serif; background:#e0e7e7; color:#747372;  padding:8px 12px; border-bottom:1px solid #FFF;}
table.tb-style-governance-org tbody td {font-family:Tahoma, Geneva, sans-serif;  background:#f5f8f9;  padding:8px 12px; border-bottom:1px solid #FFF;}
table.tb-style-governance-org .h { color:#f1a43f; font-size:12px; font-weight:bold;}


#main h1.green { color:#0ca30c}
#main h1.red { color:#e91a23}
#main h1.blue { color:#2479af}
#main h1.sky { color:#7a9096}

#product .rowContent { margin-bottom:10px; margin-top:20px; padding-bottom:20px; overflow:hidden; border-bottom:1px solid #d0d6d7;}
#product .col-left { width:385px; float: left}
#product .col-right { width:370px; float: right}
#product ul.list { margin-top:0}
#product ul.list li {background:url(../images/bullet.png) left 6px no-repeat; padding-left:10px;}
#product .icoList { overflow:hidden; margin-bottom:8px;}
#product .icoList li { float:left; margin-right:8px}
#product .icoList li.last { margin-right:0}
#photo .thumList { margin-top:10px;}
#photo .thumList li { float:left; margin-right:10px; }
#photo .thumList li.last { margin-right:0}

.product-dw {width:375px;}
.product-dw h3 { font-size:15px; font-weight:bold; display:inline-block; float:left; margin-bottom:5px;} 
.product-dw h3.green { color:#0ca30c}
.product-dw h3.red { color:#e91a23;}
.product-dw h3.blue { color:#2479af;}
.product-dw h3.sky { color:#7a9096;}
.product-dw li { padding:6px 3px; overflow:hidden; border-bottom:1px solid #d0d6d7;}
.product-dw .h { display:inline-block; width:270px;}
.product-dw .bt-dw { float:right; }
.product-dw .bt-dw.green {color:#0ca30c}
.product-dw .bt-dw.red {color:#e91a23}
.product-dw .bt-dw.blue {color:#2479af}
.product-dw .bt-dw.sky {color:#7a9096}

a.btn-dw {background:url(../images/ico-dw.png) 95% center no-repeat; }
.btn-dw { font-size:11px; color:#FFF; padding:2px 20px 2px 10px;}
.btn-dw.green { color:#FFF; background-color:#0ca30c; }
.btn-dw.red { color:#FFF;  background-color:#e91a23}
.btn-dw.blue { color:#FFF;  background-color:#2479af}
.btn-dw.sky { color:#FFF;  background-color:#7a9096}


#quality { width:960px; margin:0 auto}
.bgQuality { background:url(../images/bg-quality.jpg); min-height:900px;}
#quality .content { padding:20px 50px; color:#fbfdfe; position:relative;}
#quality .content p { margin-bottom:20px;}
#quality .content p.h { font-weight:bold; margin-bottom:10px;}
#quality .col-left { float:left; width:400px; border-right:1px solid #757c84; padding-right:25px; padding-top:25px;}
#quality .col-right { float:right; width:405px; padding-top:25px;}
#quality .bxTop { border-bottom:1px solid #757c84; padding-bottom:25px;}
#quality .bxTop img { vertical-align:middle;}
#quality ol.list-num { margin-bottom:20px;}

.img { position:relative; margin:18px 0}
.img .caption { width:99.4%; position:absolute; bottom:0; padding:12px 0; text-align:right;  color:#FFF; background:url(../images/quality/bg-quality.png) repeat; overflow:hidden;}
.img .caption h3 { font-size:20px; margin-right:15px; font-weight:normal;}

.photo-quality { margin-top:10px; padding:8px; background:url(../images/bg-quality-01.png) repeat;}
.photo-quality .p-img { display:inline-block; position:relative; margin-right:7px;}
.photo-quality .p-img.last { margin-right:0}
.photo-quality .p-img .caption { width:99.4%; position:absolute; bottom:0; padding:8px 0; text-align:right;  color:#FFF; background:url(../images/quality/bg-quality.png) repeat; overflow:hidden;}
.photo-quality .p-img .caption h3 { font-size:15px; margin-right:15px; font-weight:normal;}

.language{
	margin-top: 10px;
}